<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="项目名称：">
        <el-autocomplete
          v-model="name"
          :fetch-suggestions="querySearchAsync"
          placeholder="请填入项目名称"
          clearable
          style="width: 60%"
          @select="handleSelect"
        />
      </el-form-item>
      <el-form-item label="项目编码" prop="num">
        <el-input v-model="form.num" style="width: 46%" />
      </el-form-item>

      <el-form-item label="区域信息" prop="area">
        <el-input style="width: 46%" :value="form.area |typeFilter" />
      </el-form-item>

      <el-form-item label="安装联系人" prop="person">
        <el-input v-model="form.person" style="width: 46%" />
      </el-form-item>

      <el-form-item label="安装联系人电话" prop="phone">
        <el-input v-model="form.phone" style="width: 46%" />
      </el-form-item>

      <el-form-item label="安装地址" prop="phone">
        <el-input v-model="form.address" style="width: 46%" />
      </el-form-item>

      <el-form-item label="设备信息" prop="value4">
        <el-transfer
          v-model="form.value4"
          style="text-align: left; display: inline-block"
          filterable
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :titles="['库存', '出库']"
          :button-texts="['到左边', '到右边']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          :data="data"
          @change="handleChange"
        >
          <span slot-scope="{ option }"><el-tag :color="option.color" :type="option.type">{{ option.attribute }}</el-tag> - {{ option.label }}</span>
          <!--          <el-button slot="left-footer" class="transfer-footer" size="small" disabled>操作</el-button>-->
          <!--          <el-button slot="right-footer" class="transfer-footer" size="small" disabled>操作</el-button>-->
        </el-transfer>
      </el-form-item>
      <el-form-item label="项目归属信息">
        <el-radio-group v-model="form.type">
          <el-radio label="0">系统管理员</el-radio>
          <el-radio label="1">联通</el-radio>
          <el-radio label="2">美誉达</el-radio>
          <el-radio label="3">济南韩总</el-radio>
          <el-radio label="5">其他</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
        <el-button @click="onCancel('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
//穿梭框
<style>
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
  .el-transfer-panel{
    width: 400px;
    /*height: 500px;*/
  }
</style>
<script>
import { deviceListInfo } from '@/api/device'
import { addsubject_device, subjectListInfo } from '@/api/subject'
// 区域信息
const calendarTypeOptions = [
  { key: '371601', display_name: '市直管' },
  { key: '371602', display_name: '滨城区' },
  { key: '371604', display_name: '开发区' },
  { key: '371605', display_name: '高新区' },
  { key: '371606', display_name: '北海新区' },
  { key: '371621', display_name: '惠民县' },
  { key: '371622', display_name: '阳信县' },
  { key: '371623', display_name: '无棣县' },
  { key: '371624', display_name: '沾化区' },
  { key: '371625', display_name: '博兴县' },
  { key: '371626', display_name: '邹平市' },
  { key: '371627', display_name: '工业园区' }
]

// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  data() {
    const generateData = _ => {
      const data = []
      console.log('dddddddddddd')
      return data
    }
    return {
      rules: {
        name: [
          { required: true, message: '请填写项目名称', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请填写项目编号', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请填写项目区域', trigger: 'blur' }
        ],
        person: [
          { required: true, message: '请填写项目联系人', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请填写项目联系人电话', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请填写项目所在地', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        value4: [
          { required: true, message: '请选择设备', trigger: 'blur' }
        ]
        // build: [
        //   { required: true, message: '请填写项目施工单位', trigger: 'blur' },
        //   // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        // pay:[
        //   {required: true, message: '请填写项目服务费', trigger: 'blur'}
        // ]
      },
      form: {
        subject_name: '',
        subject_num: '',
        subject_build: '',
        subject_bank: '',
        subject_pay: '',
        subject_paytime_start: '',
        subject_paytime_end: '',
        subject_time: '',
        subject_person: '',
        subject_phone: '',
        subject_area: '',
        subject_address: '',
        subject_device_data: [],
        subject_type:''
      },
      name: '',
      restaurants: [],
      deviceData: [],
      state: '',
      timeout: null,
      data: generateData(),
      value: [],
      value4: [],
      renderFunc(h, option) {
        return '<span>{ option.key } - { option.label }</span>'
      }
    }
  },
  mounted() {
    console.log('ssss')
    this.restaurants = this.loadAll()
  },
  created: function() {
    console.log('获取设备信息')

    deviceListInfo(
      { device_mac: undefined }
    ).then((res) => {
      console.log('ssddsds')
      if (res.code == '20000') {
        this.data = res.data
        // this.$message('提交成功!')
      } else {
        this.$message({
          message: '提交失败，请联系管理员!',
          type: 'warning'
        })
      }
    })
  },
  methods: {
    loadAll() {
      return [

      ]
    },
    //  穿梭框
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
      var deviceData = this.form.value4
      console.log('deviceData:', deviceData)
    },
    querySearchAsync(queryString, cb) {
      console.log('ddd')
      // 获取项目信息
      subjectListInfo(
        {
          subject_name: queryString
        }).then((res) => {
        if (res.code == '20000') {
          console.log(res.data)
          cb(res.data)
          // this.$message('提交成功!')
        } else {
          this.$message({
            message: '提交失败，请联系管理员!',
            type: 'warning'
          })
        }
      })
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

      clearTimeout(this.timeout)
      console.log('queryString:', queryString)
      if (results.length > 0) {
        this.timeout = setTimeout(() => {
          this.form.num = ''
          cb(results)
        }, 3000 * Math.random())
      }
    },
    createStateFilter(queryString) {
      console.log('createStateFilter')
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(item) {
      this.form.num = item.address
      this.form.area = item.area
      console.log('item', item)
      console.log(this.form.num)
    },
    onSubmit(form) {
      // 获取表单信息
      var subject_num = this.form.num// 项目编码
      var subject_name = this.name// 项目铭传给你
      var subject_area = this.form.area// 项目所在地
      var subject_bank = this.form.resource// 项目所属银行
      var subject_build = this.form.build// 项目施工单位
      var subject_paytime_start = this.form.paytime_start// 项目服务费开始时间
      var subject_pay = this.form.pay// 项目服务费
      var subject_paytime_end = this.form.paytime_end// 项目服务费结束时间
      var subject_person = this.form.person// 项目联系人
      var subject_phone = this.form.phone// 项目联系人电话
      var subject_time = this.form.time// 项目完工时间
      var subject_address = this.form.address
      var subject_type = this.form.type
      // console.log('deviceData_end:',this.value4)
      this.$refs[form].validate((valid) => {
        console.log(valid)
        if (valid) {
          console.log('ddddddd')
          addsubject_device(
            {
              subject_num: subject_num,
              subject_name: subject_name,
              subject_area: subject_area,
              subject_bank: subject_bank,
              subject_build: subject_build,
              subject_paytime_start: subject_paytime_start,
              subject_pay: subject_pay,
              subject_paytime_end: subject_paytime_end,
              subject_person: subject_person,
              subject_phone: subject_phone,
              subject_time: subject_time,
              subject_address: subject_address,
              subject_device_data: this.form.value4,
              subject_type:subject_type
            }).then((res) => {
            if (res.code == '20000') {
              this.$message('提交成功!')
              // 调用全局挂载的方法,关闭当前标签页
              this.$store.dispatch('tagsView/delView', this.$route)
              // 返回上一步路由，返回上一个标签页
              this.$router.go(-1)
            } else {
              this.$message({
                message: '提交失败，请联系管理员!',
                type: 'error'
              })
            }
          })
        } else {
          this.$message('请填完整后再提交!')
          console.log('error submit!!')
          return false
        }
      })
    },

    onCancel(form) {
      this.$message({
        message: '数据已清空!',
        type: 'warning'
      })
      this.$refs[form].resetFields()
    }
  }
}
</script>

<style scoped>
  .line{
    text-align: center;
  }
</style>

